<template>
  <div>
    <!--
        导出 excel
        第一步: 安装
          npm i xlsx file-saver -S
          npm i script-loader -S
        第二步: 导入
          添加 util/excel.js 文件
        第三步: 使用
          参数说明:
            header: Array -> 导出数据的表头,默认值 []
            data: Array -> 导出的具体数据,默认值 []
            filename: String -> 导出文件名,默认值 excel-list
            autoWidth: Boolean -> 单元格是否要自适应宽度,默认值 true
            bookType: String -> 导出文件类型,默认值 xlsx
              可选值:xlsx csv txt 更多类型查看:https://github.com/SheetJS/sheetjs#supported-output-formats
          import('@/util/Export2Excel').then(excel => {
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: this.filename,
              autoWidth: this.autoWidth,
              bookType: this.type
            })
          })
     -->
    <el-input v-model="filename" style="width: 217px;" placeholder="请输入文件名(默认file)"></el-input>
    <el-button type="primary" :loading="downloadLoading" @click="handleDownload">下载</el-button>
  </div>
</template>

<script>
export default {
  name: 'Zip',
  data () {
    return {
      filename: '',
      autoWidth: true,
      downloadLoading: false,
      list: [{ id: 1, title: '哇哈哈哈哈', author: '陈亮', pageviews: '哈哈哈哈哈', display_time: '2020-07-03 15:17:23' }]
    }
  },
  methods: {
    handleDownload () {
      this.downloadLoading = true
      import('@/util/Export2Zip').then(zip => {
        const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        const list = this.list
        const data = this.formatJson(filterVal, list)
        zip.export_txt_to_zip(tHeader, data, this.filename, this.filename)
        this.downloadLoading = false
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>

<style>

</style>
